<template>
  <n-space v-bind="props.spaceProps">
    {{ text }}
    <n-icon v-if="props.state == 2 || props.state == 4 || props.state == 5"  @mouseover="mouseover"
      @mouseleave="mouseLeave">
      <QrcodeOutlined />
    </n-icon>
  </n-space>
</template>

<script lang="ts" setup>
import { ref, computed, PropType } from 'vue';
//import { createVNode, render } from 'vue'
import type { SpaceProps } from 'naive-ui/lib/space/src/Space';
import type { ImageProps } from 'naive-ui/lib/image/src/image';
import { QrcodeOutlined } from '@vicons/antd';
let isshow = ref(false);
const props = defineProps({
  imgUrl: {
    type: String as PropType<String>,
  },
  imageProps: {
    type: Object as PropType<ImageProps>,
    default: () => ({
      width: 50,
    }),
  },
  spaceProps: {
    type: Object as PropType<SpaceProps>,
  },
  text: {
    type: Object as PropType<Object>,
  },
  state: {
    type: Number as PropType<Number>,
  }
});

const text = computed(() => {
  const _statu = ['资料校验中', '编辑中' ,  '审核中', '已驳回', '已驳回', '待账户验证', '待签约', '开通权限中', '已完成' , '已作废'];
  const _key = props.state != undefined?props.state:'';
  return _statu[_key];
});
//const qrcode = ref(props.imgUrl);
const mouseLeave = () => {
  const box = document.querySelector('#qrcode_box');
  if(box)
    document.body.removeChild(box);

  isshow.value = false;
}
const mouseover = (e) => {
  const box = document.querySelector('#qrcode_box');
  if(box)
    document.body.removeChild(box);
  const element = document.createElement('div');
  element.id='qrcode_box';
  element.style.position = 'absolute';
  element.style.background = 'white';
  element.style.border='1px solid var(--n-merged-border-color)';
  element.style.top=(e.clientY - 200)+'px';;
  element.style.left= (e.clientX - 260)+'px';
  element.style.height='200px';
  element.style.width='200px';
  element.style.zIndex='1000000';
  const img = document.createElement('img');
  img.style.width='200px';
  img.src = props.imgUrl;
  element.appendChild(img);
   document.body.appendChild(element);
}

</script>
<style lang="less" scoped>
.pops {
  position:absolute;
  z-index: 10001111;
  width:2000px;
  height: 200px;
  border:1px solid red;
  border-radius: 12px;
  top:100px;
  left: 100px;
}
  </style>